<template>
  <div class="cluster-content">
    <span>{{ msg }}</span>
    <canvas id="canvasEle" width="800" height="180">not support</canvas>
    <canvas id="canvasMask" width="200" height="50" style="position: absolute;top: 0px;left: 0;z-index: 1;"></canvas>
  </div>
</template>

<script lang="ts">
import BaseMixin from './../mixins/base.mixin'
import { Options, Vue, mixins } from 'vue-class-component';
import { AutoCanvas } from './../shared/ca-animation';
import { UnRegularPolygon } from '@/shared/ca-animation/shapes';


@Options({
  props: {
    msg: String,
    cluster: String
  }
})
export default class ClusterNode extends mixins(BaseMixin) {

  msg!: string;
  cluster: string = 'current';
  created() {
    console.log('get into cluster node -', this.msg, this.cluster, this.$router);
  }
  mounted(): void {
    this.getCamData();
  }

  getCamData(angle = 0) {
    // const canvasMask = document.querySelector('#canvasMask') as HTMLCanvasElement;
    // const ctxMask = canvasMask.getContext('2d')!;
    // ctxMask.fillStyle = 'rgba(123, 123, 0, 0.2)';
    // ctxMask.fillRect(0, 0, 100, 50);
    const canvasEle = document.querySelector('#canvasEle') as HTMLCanvasElement;
    const ctx = canvasEle.getContext('2d')!;
    ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);
    const autoCanvas = new AutoCanvas('#canvasEle');
    const regularPolygon = new UnRegularPolygon({
      type: 'fill',
      points: [{ x: 10, y: 10 }, { x: 10, y: 100 }, { x: 200, y: 100 }, { x: 200, y: 10 }, { x: 10, y: 10 }],
    });
    autoCanvas.addShape(regularPolygon);

  }

}
</script>

<style scoped>
.cluster-content {
  margin: 0px;
}
</style>
